<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        button {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }

        span {
            display: inline-block;
        }
    </style>
</head>

<body>
    <main id="app">
        <button @click='first()'> <span><span v-html='name == true ? "v" : ">"'></span>同学</span><span>1/3</span></button>
        <first-com v-if='name'></first-com>
        <button @click='second()'> <span><span v-html='content == true ? "v" : ">"'></span>家人</span> <span>1/3</span></button>
        <second-com v-if='content'></second-com>
        <button @click='third()'> <span><span v-html='isShow == true ? "v" : ">"'></span>老师</span> <span>1/3</span></button>
        <third-com v-if='isShow'></third-com>
    </main>
    <script id="first" type="text/html">
        <main>
           <template v-for='list in nameList'>
             <h1>{{list.name}}</h1>
             <h2>{{list.content}}</h2>
             <hr>
           </template>
        </main>
    </script>
    <script id="second" type="text/html">
        <main>
                <template v-for='list in nameList'>
                    <h1>{{list.name}}</h1>
                    <h2>{{list.content}}</h2>
                    <hr>
                </template>
        </main>
    </script>
    <script id="third" type="text/html">
        <main>
                <template v-for='list in nameList'>
                    <h1>{{list.name}}</h1>
                    <h2>{{list.content}}</h2>
                    <hr>
                </template>
        </main>
    </script>
    <script>
        Vue.component('first-com', {
            template: '#first',
            data: function () {
                return {
                    nameList: [
                        {
                            name: '小明',
                            content: '新加坡'
                        },
                        {
                            name: '小红',
                            content: '越南'
                        },
                        {
                            name: '小问',
                            content: '老挝'
                        }
                    ]
                }
            }
        })
        Vue.component('second-com', {
            template: '#second',
            data: function () {
                return {
                    nameList: [
                    {
                            name: '小明哦',
                            content: '新加坡'
                        },
                        {
                            name: '小红哦',
                            content: '越南'
                        },
                        {
                            name: '小问哦',
                            content: '老挝'
                        }
                    ]
                }
            }
        })
        Vue.component('third-com', {
            template: '#third',
            data: function () {
                return {
                    nameList: [
                    {
                            name: '小明啊',
                            content: '新加坡'
                        },
                        {
                            name: '小红啊',
                            content: '越南'
                        },
                        {
                            name: '小问啊',
                            content: '老挝'
                        }
                    ]
                }
            }
        })
        var vue = new Vue({
            el: '#app',
            data: {
                name: false,
                content: false,
                isShow: false,
            },
            methods: {
                first: function () {
                    this.name = !this.name
                    this.nameArray =2
                },
                second: function () {
                    this.content = !this.content
                },
                third: function () {
                    this.isShow = !this.isShow
                }
            },
        })
    </script>
</body>

</html>